<template >
  <li class="battery">
    <div class="power-header-box">{{alternatorData.name}}</div>
    <div class = "isid" style="display: none">{{alternatorData.deviceid}}</div>
    <div class="power-content-box">
      <div class="power-content-left">采集状态:</div>
      <div class="power-content-right">
        <div class="device-status" :class="{device_status_active:alternatorAlarm['786432']}"></div>
      </div>
    </div>
    <div class="power-content-box">
      <div class="power-content-left">发电UA:</div>
      <div class="power-content-right">{{alternatorAlarm["786494"]}} <strong>V</strong> </div>
    </div>
    <div class="power-content-box">
      <div class="power-content-left">发电UB:</div>
      <div class="power-content-right">{{alternatorAlarm["786495"]}} <strong>V</strong> </div>
    </div>
    <div class="power-content-box">
      <div class="power-content-left">发电UC:</div>
      <div class="power-content-right">{{alternatorAlarm["786496"]}} <strong>V</strong> </div>
    </div>
    <div class="power-content-box">
      <div class="power-content-left">发电频率:</div>
      <div class="power-content-right">{{alternatorAlarm["786435"]}} <strong>Hz</strong> </div>
    </div>
    <div class="power-content-box">
      <div class="power-content-left">A相电流:</div>
      <div class="power-content-right">{{alternatorAlarm["786497"]}} <strong>A</strong> </div>
    </div>
    <div class="power-content-box">
      <div class="power-content-left">B相电流:</div>
      <div class="power-content-right">{{alternatorAlarm["786498"]}} <strong>A</strong> </div>
    </div>
    <div class="power-content-box">
      <div class="power-content-left">C相电流:</div>
      <div class="power-content-right">{{alternatorAlarm["786499"]}} <strong>A</strong> </div>
    </div>
    <div class="power-content-box">
      <div class="power-content-left">转速:</div>
      <div class="power-content-right">{{alternatorAlarm["786500"]}}  </div>
    </div>
    <div class="power-content-box">
      <div class="power-content-left">电池电压:</div>
      <div class="power-content-right">{{alternatorAlarm["786433"]}} <strong>V</strong> </div>
    </div>
    <div class="power-content-box">
      <div class="power-content-left">累计运行时间:</div>
      <div class="power-content-right">{{alternatorAlarm["786488"]}} <strong>hour</strong> </div>
    </div>
    <div class="power-content-box">
      <div class="power-content-left">累计启动次数:</div>
      <div class="power-content-right">{{alternatorAlarm["786487"]}} <strong>次</strong> </div>
    </div>
    <div class="power-content-box">
      <div class="power-content-left">累计发电量:</div>
      <div class="power-content-right">{{alternatorAlarm["786447"]}} <strong>Kwh</strong> </div>
    </div>
    <div class="power-content-box">
      <div class="power-content-left">运行状态:</div>
      <div class="power-content-right">{{alternatorAlarm["786489"]}} </div>
    </div>
    <div class="power-content-box">
      <div class="power-content-left">报警数:</div>
      <div class="power-content-right power-content-number">{{alternatorNum}}</div>
      <div v-show="alternatorNum!=0" class="power-content-more"  @click="alternatorSee2">查看</div>
    </div>
    <!--<div class="batterybtn" @click="alternatorMore2">
      更多
    </div>-->
  </li>
</template>
<script>
  export default {
    name:'alternator',
    props:[
      "alternatorData",
      "alternatorNum",
      "alternatorAlarm"
    ],
    data () {
      return {
        tableData1:[
          {
            name:"开关机状态",
            value:"开"
          },{
            name:"供电方式",
            value:"开"
          },
          {
            name:"电池状态",
            value:"电池充电状态"
          },
          {
            name:"报警数",
            value:12
          },
        ]
      }
    },
    methods: {
      alternatorSee2(){
        this.$emit('on-see2',this.alternatorData.deviceid);
      },
      alternatorMore2(){
        this.$emit('on-more2',this.alternatorData.deviceid);
      }
    }
  }
</script>
<style >
  .power-content-box{
    width: 180px;
    height: 25px;
    overflow: hidden;
    background: #fff;
    border-bottom:1px solid #ebeef5;
    position: relative;
  }
  .power-content-box:hover{
    background: #f5f7fa;
    cursor: pointer;
  }
  .power-content-left{
    float: left;
    width: 100px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 12px;
  }
  .power-content-right{
    float: left;
    width: 70px;
    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 12px;
  }
  .power-content-box .power-content-number{
    font-size: 14px;
    font-weight: 600;
    color: red;
  }
  .power-content-more{
    float: left;
    width: auto;
    font-size: 12px;
    position: absolute;
    right: 5px;
    top: 4px;
  }
  .power-content-more:hover{
    color: red;
    cursor: pointer;
  }

  .device-status{
    width:13px;
    height:13px;
    border-radius: 50%;
    background: #13ce66;
    box-shadow: 2px 2px 3px #bfbeb8;
    margin: auto;
    margin-top: 5px;
  }
  .device_status_active{
    background: #ff4949;
  }
</style>
